<template>
  <Table :data="tableData" :options="options">
    <!--日期插槽-->
    <template #date="{scope}">
      <el-icon :size="16">
        <component is="timer"/>
      </el-icon>
      {{ scope.row.date }}
    </template>
    <!--姓名插槽-->
    <template #name="{scope}">
      <el-popover effect="light" trigger="hover" placement="top" width="auto">
        <template #default>
          <div>name: {{ scope.row.name }}</div>
          <div>address: {{ scope.row.address }}</div>
        </template>
        <template #reference>
          <el-tag>{{ scope.row.name }}</el-tag>
        </template>
      </el-popover>
    </template>
    <!--操作插槽-->
    <template #operate="{scope}">
      <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
      <el-button type="danger" @click="del(scope.row)">删除</el-button>
    </template>
  </Table>
</template>

<script setup lang="ts">
import Table from '../../../pagination/Index.vue'
import {reactive} from "vue";
import {tableOptions} from "../types";

// 表格数据
const tableData = reactive<any>([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
// 表格配置
const options = reactive<tableOptions[]>([
  {
    label: "日期",
    prop: "date",
    align: "center",
    width: 180,
    slot: 'date'
  },
  {
    label: "姓名",
    prop: "name",
    align: "center",
    slot: "name"
  },
  {
    label: "地址",
    prop: "address",
    align: "center"
  }, {
    label: '操作',
    align: 'center',
    operate: true,
    width: 200
  }
])

// 编辑
const edit = (data: any) => {
  console.log(data)
}

// 删除
const del = (data: any) => {
  console.log(data)
}
</script>

<style scoped lang="scss">

</style>